<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath()}+'/'">
    <link rel="stylesheet" href="static/element/index.css"/>
</head>
<body>
<div id="app">
    <template>
        <div style="margin-bottom:18px;">
            <el-input style="width: 13%" v-model="queryForm.swaggerUrl" placeholder="swagger地址"></el-input>
            <el-input style="width: 13%" v-model="queryForm.url" placeholder="接口地址"></el-input>
            <el-input style="width: 13%" v-model="queryForm.title" placeholder="描述"></el-input>
            <el-button @click="submitQueryForm">查询</el-button>
            <el-button v-if="button.export" @click="exportData">导出</el-button>
        </div>
        <el-table :data="tableData" border ref="multipleTable">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-divider content-position="left">请求参数</el-divider>
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-table :data="props.row.requestList" size="mini" :header-cell-style="{background:'#CFD3DA'}"
                                  border>
                            <el-table-column prop="name" label="参数名"></el-table-column>
                            <el-table-column prop="comment" label="描述"></el-table-column>
                            <el-table-column prop="type" label="类型"></el-table-column>
                            <el-table-column prop="required" label="是否必填"></el-table-column>
                        </el-table>
                    </el-form>
                    <el-divider content-position="left">响应参数</el-divider>
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-table :data="props.row.responseList" size="mini" :header-cell-style="{background:'#CFD3DA'}"
                                  border>
                            <el-table-column prop="name" label="参数名"></el-table-column>
                            <el-table-column prop="comment" label="描述"></el-table-column>
                            <el-table-column prop="type" label="类型"></el-table-column>
                        </el-table>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="url" label="接口地址"></el-table-column>
            <el-table-column prop="title" label="描述" :formatter="formatTitle"></el-table-column>
            <el-table-column prop="method" label="请求方法"></el-table-column>
        </el-table>
    </template>
</div>
</body>
<script src="static/js/axios.min.js"></script>
<script src="static/js/api.js"></script>
<script src="static/js/vue.min.js"></script>
<script src="static/element/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
			return {
                tableData: [],
                button: {
                    export: false
                },
                queryForm: {
                    swaggerUrl: '',
                    url: '',
                    title: ''
                }
			}
        },
        mounted() {
        },
        methods: {
            formatTitle: function(row, column, cellValue, index) {
                return row.tags + "-" + row.title;
            },
            submitQueryForm() {
                let queryParam = {
                    swaggerUrl:this.queryForm.swaggerUrl,
                    url:this.queryForm.url,
                    title:this.queryForm.title
                };
                axios.post('tool/api/list', queryParam)
                .then((res) => {
                    if (res.code == '0000') {
                        this.tableData = res.data;
                    }
                });
            },
            exportData() {
                const selectedRows = this.$refs.multipleTable.selection;
                const urlList = selectedRows.map(item => {
                    return item.url;
                });
                if (urlList.length <= 0) {
                    this.$message({
                        showClose: true,
                        message: '请选择数据'
                    });
                } else {
                    const queryParam = {
                        swaggerUrl:this.queryForm.swaggerUrl,
                        url:this.queryForm.url,
                        title:this.queryForm.title,
                        urlList:urlList
                    };
                    axios.post('tool/api/export', queryParam, {responseType:"arraybuffer"})
                    .then((res) => {
                        var disposition = res.headers['content-disposition'];
                        var fileName = decodeURI(disposition.substring(disposition.indexOf('filename=') + 9, disposition.length));
                        var blob = new Blob([res.data], {type: 'application/msword;charset=utf-8'});
                        let link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = fileName;
                        link.click();
                        link.remove();
                    });
                }
            }
        },
        created() {
			this.submitQueryForm();
			const sysButtons = JSON.parse(localStorage.getItem("jsbb-sysButtons"));
			this.button.export = sysButtons.indexOf("tool/api/export") > -1;
        }
    });
</script>
</html>
